{extend name="layout/layout" /}

{block name="pagecss"}
<link href="__STATIC__/plugins/layui/css/layui.css" rel="stylesheet" type="text/css" />
<link href="__STATIC__/admin/pages/css/reset.css" rel="stylesheet" type="text/css" />
<link href="__STATIC__/admin/pages/css/index.css" rel="stylesheet" type="text/css" />
{/block}

{block name="content"}
<div class="row">
    <div class="col-lg-12">
    <div class="box box-success">
    <div class="main-content layui-fluid">
        <h2>{$info.tenant.name}</h2>
        <h6 class="indate">有效期：{$info.tenant.createDate}-{$info.tenant.stopUseDate}
            <span>（剩余{$info.tenant.days}天）</span>
        </h6>
        <!--今日会员-->
        <div class="row data-shows">
            <div class="col-md-4">
                <div class="common-rectangle">
                    <p>
                        今日会员：
                        <span>
                           {$info.count.userTodayCount}
                       </span>


                    </p>
                    <p>
                        当月累计：
                        <span>
                            {$info.count.userMonthCount}
                        </span>
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="common-rectangle">
                    <p>
                        今日订单：
                        <span>
                           {$info.count.orderTodayCount}
                       </span>
                    </p>
                    <p>
                        当月累计：
                        <span>
                            {$info.count.orderMonthCount}
                        </span>
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="common-rectangle">
                    <p>
                        今日收入：
                        <span>
                           {$info.count.orderTodayMoney/100}
                       </span>
                    </p>
                    <p>
                        当月累计：
                        <span>
                            {$info.count.orderMonthMoney/100}
                        </span>
                    </p>
                </div>
            </div>
        </div>
        <!--待办事项-->
        <div class="to-do-list">
            <p class="header">
                待办事项
            </p>
            <div class="row">
                <div class="col-md-3">
                    <div class="common-to-do-list">
                        <i class="layui-icon layui-icon-rmb icon" ></i>
                        <p class="grey-color">
                            账户充值
                        </p>
                        <p>
                            当前余额
                            <span>{$info.tenant.balance/100}</span>
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="common-to-do-list">
                        <i class="layui-icon icon">&#xe63c;</i>
                        <p class="grey-color">
                            订单配送
                        </p>
                        <p>
                            <span>{$info.count.orderDisCount}</span>
                            个待配送
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="common-to-do-list">
                        <i class="layui-icon icon">&#xe63a;</i>
                        <p class="grey-color">
                            售后处理
                        </p>
                        <p>
                            <span>{$info.count.RefundCount}</span>
                            个待处理
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="common-to-do-list">
                        <i class="layui-icon icon">&#xe62a;</i>
                        <p class="grey-color">
                            分销提现
                        </p>
                        <p>
                            <span>{$info.count.tixianCount}</span>
                            个待打款
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!--echart图表-->
        <div class="the-echart">
            <!--搜索-->
            <div class="to-search layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-inline">
                            <label class="layui-form-label">时间范围</label>
                            <div class="layui-input-inline" style="width: 200px;">
                                <input type="text" name="startDate" id="startDate" autocomplete="off" class="layui-input" value="{$info.search.start|date='Y-m-d',###}">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <input type="text" name="endDate" id="endDate"  autocomplete="off" class="layui-input" value="{$info.search.end|date='Y-m-d',###}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 11px">
                        <button type="button" class="btn btn-success" id="doQuery" title="搜索">
                            <i class="fa fa-search"></i> 搜索
                        </button>
                        <!--<button class="layui-btn" id="doQuery">搜索</button>-->
                    </div>
                </div>
            </div>
            <!--echart图表-->
            <div id="getechart" >
            </div>
        </div>
        <!--公告-->
        <ul  class="notice-tab" style="display: none">
            <li>
                公告
                <span>
                    更多
                </span>
            </li>
            <li>
                <span>
                    2018-03-10
                </span>
                想让你的生意更好做，就要选择秒到+小程序
            </li>
            <li>
                <span>
                    2018-03-10
                </span>
                想让你的生意更好做，就要选择秒到+小程序
            </li>
        </ul>
    </div>
</div>
</div>
</div>
{/block}

{block name="pagescript"}
<script src="__STATIC__/admin/js/include.js" type="text/javascript"></script>
<script src="__STATIC__/admin/pages/js/echarts.js"></script>
<script>
    $('#startDate').datepicker({   //开始时间
        language:"zh-CN",
        orientation:'bottom',
        todayBtn : "linked",
        autoclose : true,
        todayHighlight : true,
        endDate : new Date()
    }).on('changeDate',function(e){
        var startTime = e.date;
        $('#endDate').datepicker('setStartDate',startTime);
    });

    $('#endDate').datepicker({   // 结束时间：
        language:"zh-CN",
        orientation:'bottom',
        todayBtn : "linked",
        autoclose : true,
        todayHighlight : true,
        endDate : new Date()
    }).on('changeDate',function(e){
        var endTime = e.date;
        $('#startDate').datepicker('setEndDate',endTime);
    });

    var myChart = echarts.init(document.getElementById('getechart'));
    // 指定图表的配置项和数据
    var option = {
        color:['rgba(255, 223, 37, 0.7)','rgba(54, 169, 206, 0.7)', 'rgba(0, 0, 0, 0.7)', 'rgba(255, 51, 153, 0.7)'],
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#60A3F5'
                }
            }
        },
        //选择图标
        legend: {
            top: 'top',
            padding: [20,0,0,0],
            data:['订单数','会员数','交易额'],
            selectedMode: 'single'
        },
        toolbox: {
            show: false,
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '0%',
            right: '4.3%',
            bottom: '3%',
            containLabel: true
        },
        //x轴名称
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : {$info.chart.x_option}
            }
        ],
        //y轴名称
        yAxis : [
            {
                type : 'value'
            }
        ],
            visualMap: [
            { // 第一个 visualMap 组件
                type: 'continuous', // 定义为连续型 viusalMap
            }
        ],
        series : [
            {
                name:'订单数',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data:{$info.chart.order}
            },
            {
                name:'会员数',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data:{$info.chart.user}
            },
            {
                name:'交易额',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data:{$info.chart.money}
            }
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);

    $('#doQuery').on('click', function(){
        var param = { 'start' : $('#startDate').val(), 'end' : $('#endDate').val()};
        $.ajax({
            url : "{:url('admin/index/chartApi')}",
            type : 'post',
            dataType : 'json',
            contentType : "application/json; charset=utf-8",
            data : JSON.stringify(param)
        }).done(function(data) {
            var option1 = myChart.getOption();
            option1.xAxis[0].data = JSON.parse(data.x_option);
            option1.series[1].data = JSON.parse(data.user);
            option1.series[0].data = JSON.parse(data.order);
            option1.series[2].data = JSON.parse(data.money);
            myChart.setOption(option1);
        });
    });
</script>
{/block}